<template>
    <div class="comp-item">
        <el-image :lazy="true" style="height: 190px; width: 100%; border-radius: 10px 10px 0 0" :src="src"></el-image>
        <slot></slot>
        <!-- 插槽出口 -->
    </div>
</template>
<script setup lang="ts">
interface Props {
    // 设置 每个item的宽
    itemWidth: string;
    src?: string;
}
defineProps<Props>();
</script>
<style lang="scss">
.clear-margin-right {
    margin-right: 0px !important;
}

.clear-margin-right4n {
    margin-right: 20px !important;
}

.comp-item {
    width: v-bind(itemWidth);
    margin-right: 15px;
    margin-bottom: 15px;
    box-sizing: border-box;
    border: 1px #ddd solid;
    border-radius: 10px;
    cursor: pointer;

    .info {
        padding: 13px 16px 10px;
        box-sizing: border-box;

        > .title {
            display: block;
            font-size: 20px;
            white-space: nowrap;
            /* 防止文本换行 */
            overflow: hidden;
            /* 隐藏溢出的内容 */
            text-overflow: ellipsis;
            /* 显示省略号 */
            color: #474b5f;
            height: 50px;
        }

        > .item-tit {
            margin-top: 5px;
            font-size: 13px;
            color: #666666;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

        > .item-detail {
            margin-top: 16px;
            height: 84px;
            border-radius: 6px;
            background: #f5f5f5;
            display: flex;
            padding: 5px 20px;
            box-sizing: border-box;
            align-items: center;
            font-size: 15px;
            line-height: 21px;

            > .text {
                // 允许我们使用-webkit-line-clamp和-webkit-box-orient属性来控制文本的布局方式。
                display: -webkit-box;
                // 设置为3，意味着文本会被限制在三行之内。
                -webkit-line-clamp: 3;
                /* 限定文本显示的行数 */
                -webkit-box-orient: vertical;
                // 隐藏超出容器的文本部分。由于-webkit-line-clamp限制了文本的行数，超出的文本将会被隐藏。
                overflow: hidden;
                // 显示省略号
                text-overflow: ellipsis;
            }
        }
    }
}
</style>
